<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/轮播测试.css">
</head>

<body>
    <div class="m-promo">
        <ul class="promo-img-list" style="width: 4100px;margin-left: 0px;">
            <li class="promo-item current">
                <a href="">
                    <img src="./images/luobo1.png" alt="女帝" width="820" height="340">
                </a>
            </li>
            <li class="promo-item">
                <a href="">
                    <img src="./images/lunbo2.png" alt="女帝无双通行证" width="820" height="340">
                </a>
            </li>
            <li class="promo-item">
                <a href="">
                    <img src="./images/lunbo3.jpeg" alt="永恒之森" width="820" height="340">
                </a>
            </li>
            <li class="promo-item">
                <a href="">
                    <img src="./images/lunbo4.jpeg" alt="极限闪击热力回归" width="820" height="340">
                </a>
            </li>
            <li class="promo-item">
                <a href="">
                    <img src="./images/冰雪节周边.jpeg" alt="冰雪节限定周边" width="820" height="340">
                </a>
            </li>
        </ul>
        <div class="promo-title-list">
            <span class="title" style="width: 164px">女帝</span>
            <span class="title" style="width: 164px">女帝无双通行证</span>
            <span class="title" style="width: 164px">永恒之森</span>
            <span class="title" style="width: 164px">极限闪击热力回归</span>
            <span class="title" style="width: 164px">冰雪节限定周边</span>
        </div>
    </div>
    <script src="./lib/jquery.js"></script>
    <script>
        let as = document.querySelectorAll(".promo-title-list>span");
        let imgs = document.querySelectorAll(".promo-img-list>li");
        let Mpo = document.querySelector(".m-promo");
        let timerId = null;
        let index = 0;//当前按钮的索引，默认是第一个按钮的索引
        // console.log(as, imgs, Mpo);
        function play(num) {
            for (let j = 0; j < as.length; j++) {
                as[j].className = "";
                imgs[j].className = "";
            }
            as[num].className = "selected";
            imgs[num].className = "current";
        }

        // 为底部的按钮标签添加事件
        for (let i = 0; i < as.length; i++) {
            as[i].addEventListener("mouseenter", function () {
                // console.log(i);
                // i表示每个按钮的索引(下标)
                //把当前标签的索引赋给全局变量index,以供定时器调用。
                index = i;
                play(i);
            })
        }
        //让定时器来执行鼠标移入的操作
        timerId = setInterval(function () {
            index++;
            if (index == as.length) {
                index = 0;
            }
            console.log("index", index);
            play(index);

        }, 1000);

        //鼠标进入大盒子，要清除定时器
        Mpo.addEventListener("mouseenter", function () {
            //清除定时器
            clearInterval(timerId);
        })
        // 鼠标离开大盒子时，让定时器继续执行
        Mpo.addEventListener("mouseleave", function () {
            //让定时器来执行鼠标移入的操作
            timerId = setInterval(function () {
                index++;
                if (index == as.length) {
                    index = 0;
                }
                console.log("index", index);
                play(index);

            }, 1000);
        })
    </script>
</body>

</html>